<template>
	<view class='commodity'>
		<view class="commodity-nr">
			<view class="commodity-nr-head">
				<view>
					<u--image :src="commodityDatas.img" width="100%" height="600rpx"></u--image>
				</view>
				<view class="commodity-nr-head-xx">
					<view class="commodity-nr-head-xx-left">
						<view class="commodity-nr-heand-jg">
							<text class="commodity-nr-heand-jg-money"><text class="huobi">¥</text>{{commodityDatas.money}}</text>
							<text class="commodity-nr-heand-jg-oldmoney">¥{{commodityDatas.oldmoney}}</text>
						</view>
						<view class="commodity-nr-heand-name">{{commodityDatas.name}}</view>
					</view>
					<view class="commodity-nr-head-xx-right">
						<view class="commodity-nr-head-yxs">月销{{commodityDatas.salesQuantity}}件</view>
						<view class="commodity-nr-head-fx">
							<u-icon name="share-square" size="30"></u-icon>分享
						</view>
					</view>
				</view>
			</view>
			<view class="commodity-nr-gg">
				<view class="commodity-nr-gg-fw" v-if="commodityDatas.serve">
					<view class="commodity-nr-gg-fw-nr">
						<view class="biotiming">服务</view>
						<view v-for="(listItem,listIndex) in commodityDatas.serve" :key="listIndex" class="commodity-nr-gg-yyy">
							<view class="commodity-nr-gg-xxx">
								<view class="hongdian">·</view>
								<view>{{listItem}}</view>
							</view>
						</view>
					</view>
					<u-line></u-line>
				</view>
				<view class="commodity-nr-gg-fw" v-if="commodityDatas.guarantee">
					<view class="commodity-nr-gg-fw-nr">
						<view class="biotiming">保障</view>
						<view v-for="(listItem,listIndex) in commodityDatas.guarantee" :key="listIndex" class="commodity-nr-gg-yyy">
							<view class="commodity-nr-gg-xxx">
								<view class="hongdian">·</view>
								<view>{{listItem}}</view>
							</view>
						</view>
					</view>
					<u-line></u-line>
				</view>
				<view class="commodity-nr-gg-fw" v-if="commodityDatas.send">
					<view class="commodity-nr-gg-fw-nr">
						<view class="biotiming">发货</view>
						<view class="commodity-nr-gg-yyy">
							<view class="commodity-nr-gg-xxx">
								<view>{{commodityDatas.send}}{{commodityDatas.shop}}负责发货并提供售后服务</view>
							</view>
						</view>
					</view>
					<u-line></u-line>
				</view>
				<view class="commodity-nr-gg-fw" @click="openGGClick(commodityDatas.specification)" v-if="commodityDatas.specification">
					<view class="commodity-nr-gg-fw-nr">
						<view class="biotiming">选择</view>
						<view class="commodity-nr-gg-yyy">
							<view class="commodity-nr-gg-xxx">
								<view>请选择 {{commodityDatas.danwei}}</view>
								<view class="jiantou"><u-icon name="arrow-right"></u-icon></view>
							</view>
						</view>
					</view>
					<u-line></u-line>
				</view>
				<view class="commodity-nr-gg-fw">
					<view class="commodity-nr-gg-fw-nr">
						<view class="biotiming">积分</view>
						<view class="commodity-nr-gg-yyy">
							<view class="commodity-nr-gg-xxx">
								<view>{{commodityDatas.jifen}}积分</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="commodity-nr-dp" v-if="commodityDatas.shop && commodityDatas.address">
				<view>
					<u--image :src="commodityDatas.img" width="180rpx" height="180rpx" shape="circle"></u--image>
				</view>
				<view class="commodity-nr-dp-dz-xx">
					<view class="commodity-nr-dp-dz-name">{{commodityDatas.shop}}</view>
					<view class="commodity-nr-dp-dz">
						<u-icon name="map" size="40rpx"></u-icon>
						<view>{{commodityDatas.address}}</view>
					</view>
				</view>
				<view class="commodity-nr-dp-dp">
					<u-icon name="bag" size="40rpx" color="#FF2135"></u-icon>
					<view>进店逛逛</view>
				</view>
			</view>
			<view class="commodity-nr-xq">
				<view v-for="(item,index) in commodityDatas.detailsImg" :key="index">
					<u--image :src="item" width="100%" height="500rpx" ></u--image>
				</view>
			</view>
		</view>
		<view class="navigation">
			<view class="left">
				<view class="badgeNum">
					<u-badge type="error" :value="gwcsl" max="99" numberType="overflow"></u-badge>
				</view>
				<view class="item">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view>
				<view class="item car">
					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
				<view class="item">
					<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="openGGClick(commodityDatas.specification)">加入购物车</view>
				<view class="buy btn u-line-1" @click="openGGClick(commodityDatas.specification)">立即购买</view>
			</view>
		</view>
		<view>
			<u-popup :show="ggshow" mode="bottom" @close="ggClose">
				<view class="gg-tc">
					<view class="gg-tc-t">
						<view class="gg-tc-t-img"><u--image :src="commodityDatas.img" width="180rpx" height="200rpx"></u--image></view>
						<view>
							<text class="commodity-nr-heand-jg-money"><text class="huobi">¥</text>{{commodityDatas.money}}</text>
							<text class="commodity-nr-heand-jg-oldmoney">¥{{commodityDatas.oldmoney}}</text>
							<view class="gg-tc-t-kc">库存 {{kc}}{{commodityDatas.liangci}}</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="gg-tc-gg">
						<view>{{commodityDatas.danwei}}</view>
						<view class="gg-tc-bq">
							<view v-for="(listItem,listIndex) in commodityDatas.specification" :key="listIndex" class="gg-tc-bq-xx" >
								<u-tag :text="listItem.gg" plain :type="[listItem.gg==ggbqtype?'error':'info']" size="large" @click="ggBqClick(listItem)"></u-tag>
							</view>
						</view>
						<view class="gg-tc-gm">
							<view>购买数量</view>
							<view class="gg-tc-gm-sl">
								<view style="margin-right: 15rpx;"><u-icon name="minus-circle" size="45rpx" @click="subNumClick"></u-icon></view>
								<view>{{sl}}</view>
								<view style="margin-left: 15rpx;"><u-icon name="plus-circle" size="45rpx" @click="addNumClick"></u-icon></view>
							</view>
						</view>
					</view>
					<view class="gg-tc-an">
						<u-button text="加入购物车" color="#FF2135" shape="circle" @click="addShop"></u-button>
					</view>
				</view>
				<u-toast ref="uToast"></u-toast>
			</u-popup>
		</view>
	</view>
</template>

<script>
import configData from "@/static/indexdata.js"
export default {
	data() {
		return {
			pageId:'',
			commodityDatas:{},
			ggshow:false,
			kc:0,
			ggbqtype:'',
			sl:0,
			// 购物车数量其实要放在Storage中
			gwcsl:0,
			oraders:[]
		}
	},
	onLoad(val){
		this.pageId=decodeURIComponent(val.id)
		// 没有id返回首页
		if(!this.pageId){
			uni.redirectTo({
				url:'../index/index'
			});
		}
		this.getCommodityDatas(this.pageId);
		
	},
	methods: {
		getCommodityDatas(id){
			id = 1;
			let datas = configData.commodityListDatas;
			this.commodityDatas = datas[id];
		},
		openGGClick(item){
			this.ggshow = true
		},
		ggClose(){
			this.ggshow = false
		},
		ggBqClick(item){
			this.kc = item.kc;
			this.ggbqtype = item.gg;
		},
		subNumClick(){
			if(this.ggbqtype==""){
				this.$refs.uToast.show({
					type: 'error',
					icon: false,
					message: "选择"+this.commodityDatas.danwei,
				})
			}
			if(this.sl>0){
				this.sl = this.sl - 1;
			}else{
				this.sl =0
			}
		},
		addNumClick(){
			if(this.ggbqtype==""){
				this.$refs.uToast.show({
					type: 'error',
					icon: false,
					message: "选择"+this.commodityDatas.danwei,
				})
			}
			if(this.sl >= this.kc){
				this.sl = this.kc;
			}else{
				this.sl = this.sl+1
			}
		},
		addShop(){
			let map = {
				gg: this.ggbqtype,
				sl: this.sl
			}
			this.oraders.push(map)
			// 这里我用了外卖app的逻辑，显示总数量
			this.gwcsl = this.gwcsl + this.sl
			this.ggshow = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.commodity{
	background-color: #F5F5F5;
}
.commodity-nr{
	margin-bottom: 180rpx;
}
.navigation {
	display: flex;
	// margin-top: 200rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	// 固定底部
	position: fixed;
	bottom: 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.badgeNum{
			position: absolute;
			left: 210rpx;
		}
		.item {
			margin: 0 30rpx;
			.text{
				padding-left: 16rpx;
			}
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 70rpx;
			padding: 0 25rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			// margin-right: 30rpx;
			border-radius: 36rpx 0 0 36rpx;
		}
		.buy {
			background-color: #ff7900;
			border-radius: 0 36rpx 36rpx 0;
		}
	}
}
.commodity-nr-head-xx{
	display: flex;
	justify-content:space-between;
	background-color: white;
	padding-bottom: 60rpx;
}

.commodity-nr-heand-jg{
	
}
.commodity-nr-heand-jg-money{
	font-size: 60rpx;
	color: #FF2135;
}
.commodity-nr-heand-jg-oldmoney{
	font-size: 35rpx;
	color: #787878;
	text-decoration:line-through;
	margin-left: 30rpx;
}
.commodity-nr-heand-jg .huobi{
	font-size: 40rpx;
}
.commodity-nr-heand-name{
	font-size: 58rpx;
}
.commodity-nr-head-xx-left{
	margin-top: 30rpx;
	margin-left: 30rpx;
}
.commodity-nr-head-xx-right{
	margin-top: 50rpx;
}
.commodity-nr-head-yxs{
	font-size: 40rpx;
	color: #787878;
	padding-right:50rpx;
}
.commodity-nr-head-fx{
	color: #787878;
	display: flex;
	flex-direction: row;
	font-size: 40rpx;
	background-color: #F2F2F2;
	padding-left: 30rpx;
	padding-right:50rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	margin-top: 15rpx;
	border-radius:30rpx 0 0 30rpx;
}
.commodity-nr-gg{
	margin-top: 40rpx;
	background-color: white;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
}
.commodity-nr-gg-fw{
	padding-top: 20rpx;
}
.commodity-nr-gg-fw-nr{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding-left: 40rpx;
	// height: 100rpx;
	padding-bottom: 20rpx;
}
.hongdian{
	font-size: 70rpx;
	color: #FF2135;
}
.biotiming{
	font-size: 40rpx;
	color: #787878;
	white-space:nowrap;
	margin-right: 30rpx;
}
.commodity-nr-gg-xxx{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.commodity-nr-gg-yyy{
	font-size: 35rpx;
	margin-right: 40rpx;
}
.jiantou{
	margin-left: 300rpx;
}
.gg-tc{
	margin-top: 30rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}
.gg-tc-t{
	display: flex;
	flex-direction: row;
	margin-bottom: 30rpx;
}
.gg-tc-t-img{
	margin-right: 20rpx;
}
.gg-tc-t-kc{
	font-size: 35rpx;
	color: #787878;
}
.gg-tc-bq{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.gg-tc-bq-xx{
	width: 90rpx;
	margin-right: 20rpx;
	margin-top: 20rpx;
}
.gg-tc-gm{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	font-size: 30rpx;
	margin-top: 50rpx;
}
.gg-tc-gm-sl{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 50rpx;
}
.gg-tc-gg{
	margin-top: 50rpx;
}
.gg-tc-an{
	margin-top: 50rpx;
	margin-bottom: 50rpx;
}
.commodity-nr-dp{
	background-color: white;
	margin-top: 40rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.commodity-nr-dp-dz-xx{
	margin-left: 10rpx;
	font-size: 35rpx;
}
.commodity-nr-dp-dz-name{
	font-size: 40rpx;
}
.commodity-nr-dp-dz{
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #787878;
}
.commodity-nr-dp-dp{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left:30rpx;
	font-size: 35rpx;
	color: #FF2135;
}
.commodity-nr-xq{
	margin-top: 40rpx;
	background-color: white;
	padding-bottom: 140rpx;
}
</style>

<style>
	.gg-tc-bq >>> .u-tag-wrapper{
	}
</style>